<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                <el-row class="search-input">
                    <el-form-item label="仓库：">
                        <el-input v-model="searchFilters.name" clearable placeholder="请输入仓库编码或仓库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库归属：">
                        <el-select v-model="searchFilters.ownerShip" clearable placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="自有" value="1"></el-option>
                            <el-option label="第三方" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="仓库状态：">
                        <el-select v-model="searchFilters.status" clearable placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="停用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属组织:">
                        <el-select clearable v-model="searchFilters.deptId" 
                        placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="searchItem in selectedOptionsData1" 
                            :key="searchItem.deptId" 
                            :label="searchItem.storeName" 
                            :value="searchItem.deptId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <!-- 搜索区域按钮-查询,重置 -->
                <el-row class="search-button">
                    <el-form-item>
                        <!--查询:蓝色图标-->
                        <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                        <!--重置:白色图标-->
                        <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-row>
                <el-form-item class="t_r w100 mb20">
                    <el-button-group>
                        <el-button type="primary" size="small" @click="add()">新增</el-button>
                        <el-button type="primary" size="small" @click="unEnables()">停用</el-button>
                        <el-button type="primary" size="small" @click="Enables()">启用</el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
            <!-- 表格数据部分 -->
            <div class="table-wrap">
                <MStoreTable :height="400" :operationWidth="300" :tableList="tableList" :showDeleteOperation="true" 
                :tableHeaderList="tableHeaderList" 
                :totalSize="totalSize" 
                :showDetailOperation="true"
                :showEditOperation="true" 
                :showBatchDelete="true" 
                :showSelection="true" :showIndex="false" 
                @findPage="findPage"
                @handleDelete="handleDelete" 
                @handleEdit="handleEdit"
                @handleDetail="handleDetail" 
                @handleSizeChange="handleSizeChange" 
                @handlePageChange="handlePageChange" 
                @selectionChange="selectionChange" 
                ref="jicTable"></MStoreTable>
            </div>
            <!--新增编辑界面-->
            <el-dialog title="新增" width="80%" :visible.sync="dialogVisible" :close-on-click-modal="false">
                <el-form :model="dataForm" label-width="130px" :rules="dataFormRules" ref="dataForm">
                    <el-row class="searchDialog-input">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="仓库编码：" prop="code">
                                    <el-input v-model="dataForm.code" auto-complete="off" placeholder="请输入仓库编码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="仓库名称：" prop="name">
                                    <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入仓库名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="外部编码：" prop="outCode">
                                    <el-input v-model="dataForm.outCode" auto-complete="off" placeholder="请输入外部仓库编码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="仓库归属：" prop="ownerShip">
                                    <el-radio v-model="dataForm.ownerShip" :label="1">自有</el-radio>
                                    <el-radio v-model="dataForm.ownerShip" :label="2">第三方</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="仓库地址：">
                                    <v-distpicker :province="dataForm.addressProvinceName" @province="changeProvince" :city="dataForm.addressCityName" @city="changeCity" :area="dataForm.addressAreaName" @area="changeArea"></v-distpicker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址：" prop="addressDetail">
                                    <el-input v-model="dataForm.addressDetail" auto-complete="off" placeholder="请输入详细地址"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="仓库负责人：" prop="ownerName">
                                    <el-input v-model="dataForm.ownerName" auto-complete="off" placeholder="请输入仓库负责人"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="负责人电话" prop="ownerMobile">
                                    <el-input v-model="dataForm.ownerMobile" auto-complete="off" placeholder="请输入负责人电话"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="是否对接WMS：" prop="isWms">
                                    <el-radio v-model="dataForm.isWms" :label="1">是</el-radio>
                                    <el-radio v-model="dataForm.isWms" :label="2">否</el-radio>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="商家：" prop="deptName">
                                    <el-select v-model="dataForm.deptName" placeholder="请选择所属组织">
                                        <el-option v-for="item in selectedOptionsData1" 
                                        :key="item.deptId" 
                                        :label="item.storeName" 
                                        :value="item.deptId"
                                        style="width:100%" 
                                        :click="dataForm.deptId=item.deptId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="备注：" prop="remark">
                            <el-input type="textarea" v-model="dataForm.remark" auto-complete="off" placeholder="请输入备注"></el-input>
                        </el-form-item>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center">
                    <el-button :size="size" type="primary" @click.native="submitForm">保存</el-button>
                    <el-button :size="size" type="primary" @click.native="submitFormEnable">保存并启用</el-button>
                    <el-button :size="size" @click.native="dialogVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import MStoreTable from "@/components/jicComponentGallery/MStoreTable";
import VDistpicker from "v-distpicker";
//二.数据输出区
export default {
    //2.1 注册组件
    components: {
        MStoreTable,
        VDistpicker,
    },

    //2.2 数据初始化区
    data() {
        return {
            selections: [], //多选框选中项
            selectedOptionsData1: [], //商家列表数据
            provinceOptions: [],
            cityOptions: [],
            countryOptions: [],
            size: "small",
            dataForm: {
                code: null,
                name: null,
                outCode: null,
                ownerShip: 1,

                addressProvinceId: null,
                addressCityId: null,
                addressAreaId: null,
                addressProvinceName: null,
                addressCityName: null,
                addressAreaName: null,

                addressDetail: null,
                ownerName: null,
                ownerMobile: null,
                isWms: 2,
                deptObject: null,
                deptId: null,
                deptName: null,
                status: 0,
                deleteFlag: 0,
                type: 1,
            },
            //表单校验规则
            dataFormRules: {
                code: [{
                        required: true,
                        message: "请输入仓库编码",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 10,
                        message: "长度在 0 到 10 个字符",
                        trigger: "blur"
                    }
                ],
                name: [{
                        required: true,
                        message: "请输入仓库名称",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    }
                ],
                deptObject: [{
                    required: true,
                    message: "请选择所属组织",
                    trigger: "change"
                }, ],
            },
            //2.2.1 公共数据初始化
            pageIndex: 0,
            pageSize: 10,
            totalSize: 0, //// 返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [{}], // 表格列表数据
            searchSize: "mini",

            // 2.2.2 表格表头数据
            tableHeaderList: [{
                    prop: "code",
                    label: "仓库编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "name",
                    label: "仓库名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "type",
                    label: "仓库类型",
                    minWidth: 100,
                    formatter: this.formatterType
                },
                {
                    prop: "ownerShip",
                    label: "仓库归属",
                    minWidth: 100,
                    formatter: this.formatterOwnerShip
                },
                {
                    prop: "status",
                    label: "仓库状态",
                    minWidth: 100,
                    formatter: this.formatterStatus
                },
                {
                    prop: "deptName",
                    label: "商家",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "addressDetail",
                    label: "仓库地址",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "ownerName",
                    label: "仓库负责人",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "ownerMobile",
                    label: "负责人电话",
                    minWidth: 200,
                    formatter: null
                }
            ], // 2.2.3 搜索表单对应的数据对象初始化
            searchFilters: {
                name: null,
                code: null,
                ownerShip: null,
                status: null,
                deptId: null,
                delete_flag: "0"
            },
            operation: false, // true:新增, false:编辑
            dialogVisible: false //// 是否显示弹窗内容;
        };
    },

    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.findPage();
        this.listMerchant();
    },
    //2.3 JavaScript 方法区
    methods: {
        //将商品id和商品名称进行赋值
        //2.3.1 JavaScript 公共方法区
        changeProvince(data) {
            this.dataForm.addressProvinceId = data.code;
            this.dataForm.addressProvinceName = data.value;
        },
        changeCity(data) {
            this.dataForm.addressCityId = data.code;
            this.dataForm.addressCityName = data.value;
        },
        changeArea(data) {
            this.dataForm.addressAreaId = data.code;
            this.dataForm.addressAreaName = data.value;
        },
        //查询商家数据
        listMerchant() {
            let this_ = this;
            this.utils.request.queryStoreDeptList({}, function (res) {
                if (res.code === "0000") {
                    this_.selectedOptionsData1 = res.data;
                }
            });
        },
        //2.请求列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {
                    delete_flag: "0"
                };
            }
            this_.searchFilters.pageNum =
                pageNum === null || pageNum === undefined ?
                this.pageRequest.pageNum :
                pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findMStorePage(this_.searchFilters, function (res) {
                if (res.code === "0000") {
                    this_.tableList = res.data.rows;
                    this_.totalSize = Number(res.data.total);
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
        },

        // 3.重置搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 4.详情按钮对应的方法
        handleDetail(params) {
            this.$router.push({
                path: "/getMStoreDetail/" + params.row.id
            });
        },

        //编辑跳转页面
        handleEdit(params) {
            this.$router.push({
                path: "/getMStoreUpdate/" + params.row.id
            });
        },

        // 5.请求条数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageNum = 1;
            this.pageRequest.pageSize = params.size;
            this.findPage();
        },

        // 6.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 7.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 8.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        //==========2.3.1 JavaScript 自定义方法区==========
        //提交表单--新增前先判断所属组织是否已有仓库
        submitForm: function () {
            const this_ = this;
            console.log(this_.dataForm);
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        //通过仓库编码，仓库名称查询判断是否已有仓库
                        //判断所属组织是否已有数据--res.data==1表示该所属组织已建仓库
                        // if (this_.dataForm.deptObject != null && this_.dataForm.deptObject != '' && this_.dataForm.deptObject != undefined) {
                        //     this_.dataForm.deptId = this_.dataForm.deptObject.split("^")[0]
                        //     this_.dataForm.merchantName = this_.dataForm.deptObject.split("^")[1]
                        // }
                        let paramss = this_.dataForm;
                        this.utils.request.getByMerchantId(paramss, function (res) {
                            if (res.data.length != 0) {
                                this_.$confirm('仓库编号或名称或该所属组织已经存在', '提醒', {
                                    cancelButtonText: '取消',
                                    confirmButtonText: '确定'
                                })
                            } else if (res.data.length == 0) {
                                let params = this_.dataForm;
                                params.status = 0;
                                this_.utils.request.saveMStore(params, function (res) {
                                    if (res.code === "0000") {
                                        this_.$message({
                                            message: "操作成功",
                                            type: "success"
                                        });
                                        this_.dialogVisible = false;
                                        this_.dataForm = {
                                            code: null,
                                            name: null,
                                            outCode: null,
                                            ownerShip: 1,
                                            addressProvinceId: null,
                                            addressCityId: null,
                                            addressAreaId: null,
                                            addressProvinceName: null,
                                            addressCityName: null,
                                            addressAreaName: null,
                                            addressDetail: null,
                                            ownerName: null,
                                            ownerMobile: null,
                                            isWms: 2,
                                            deptId: null,
                                            status: 0,
                                            deleteFlag: 0,
                                            type: 1,
                                        };
                                        this_.findPage(null);
                                    } else {
                                        this_.$message({
                                            message: "操作失败, " + res.msg,
                                            type: "error"
                                        });
                                    }
                                });
                            }
                        });
                    });
                }
            });
        },
        submitFormEnable: function () {
            const this_ = this;
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        //通过仓库编码，仓库名称查询判断是否已有仓库
                        //判断所属组织是否已有数据--res.data==1表示该所属组织已建仓库
                        // if (this_.dataForm.deptObject != null && this_.dataForm.deptObject != '' && this_.dataForm.deptObject != undefined) {
                        //     this_.dataForm.deptId = this_.dataForm.deptObject.split("^")[0]
                        //     this_.dataForm.merchantName = this_.dataForm.deptObject.split("^")[1]
                        // }
                        let paramss = this_.dataForm;
                        this.utils.request.getByMerchantId(paramss, function (res) {
                            if (res.data.length != 0) {
                                this_.$confirm('仓库编号或名称或该所属组织已经存在', '提醒', {
                                    cancelButtonText: '取消',
                                    confirmButtonText: '确定'
                                })
                            } else if (res.data.length == 0) {
                                let params = this_.dataForm;
                                params.status = 1;
                                this_.utils.request.saveMStore(params, function (res) {
                                    if (res.code === "0000") {
                                        this_.$message({
                                            message: "操作成功",
                                            type: "success"
                                        });
                                        this_.dialogVisible = false;
                                        this_.dataForm = {
                                            code: null,
                                            name: null,
                                            outCode: null,
                                            ownerShip: 1,
                                            addressProvinceId: null,
                                            addressCityId: null,
                                            addressAreaId: null,
                                            addressProvinceName: null,
                                            addressCityName: null,
                                            addressAreaName: null,
                                            addressDetail: null,
                                            ownerName: null,
                                            ownerMobile: null,
                                            isWms: 2,
                                            deptId: null,
                                            status: 0,
                                            deleteFlag: 0,
                                            type: 1,
                                        };
                                        this_.findPage(null);
                                    } else {
                                        this_.$message({
                                            message: "操作失败, " + res.msg,
                                            type: "error"
                                        });
                                    }
                                });
                            }
                        });
                    });
                }
            });
        },

        handleDelete(data) {
            this.$confirm("确认删除吗？", "提示", {}).then(() => {
                const params = data.row;
                const this_ = this;
                this.utils.request.deleteMStoreByPrimaryKey(params, function (res) {
                    if (res.code === "0000") {
                        this_.$message({
                            message: "操作成功",
                            type: "success"
                        });
                        this_.findPage(null);
                    } else {
                        this_.$message({
                            message: "操作失败, " + res.msg,
                            type: "error"
                        });
                    }
                });
            });
        },
        //批量启用
        Enables() {
            let that = this;
            if (that.selections.length == 0) {
                that.$confirm('请选择数据', '提醒', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定'
                })
                return;
            }
            let ids = [];
            for (let i = 0; i < this.selections.length; i++) {
                if (this.selections[i].status == "0") {
                    ids.push(this.selections[i].id);
                }
            }
            if (ids.length < 1) {
                that.$confirm('没有需要启用的数据，请重新选择', '提醒', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定'
                })
                return;
            }
            //调用方法、
            this.$confirm("是否确认启用吗？", "提示", {}).then(() => {
                this.utils.request.updateStoreStatus({
                        ids: ids,
                        status: "1"
                    },
                    function (res) {
                        if (res.code === "0000") {
                            that.$message({
                                message: "操作成功",
                                type: "success"
                            });
                            that.findPage(null);
                        } else {
                            that.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            });
        },
        //批量停用
        unEnables() {
            let that = this;
            if (that.selections.length == 0) {
                that.$confirm('请选择数据', '提醒', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定'
                })
                return;
            }
            let ids = [];
            for (let i = 0; i < this.selections.length; i++) {
                if (this.selections[i].status == "1") {
                    ids.push(this.selections[i].id);
                }
            }
            if (ids.length < 1) {
                that.$confirm('没有需要停用的数据，请重新选择', '提醒', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定'
                })
                return;
            }
            //调用方法、
            this.$confirm("是否确认停用吗？", "提示", {}).then(() => {
                this.utils.request.updateStoreStatus({
                        ids: ids,
                        status: "0"
                    },
                    function (res) {
                        if (res.code === "0000") {
                            that.$message({
                                message: "操作成功",
                                type: "success"
                            });
                            that.findPage(null);
                        } else {
                            that.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            });
        },
        // 选中列表中的选项触发
        selectionChange(selections) {
            this.selections = selections.selections;
        },
        formatterStatus(row) {
            if (row.status === 0) {
                return "停用";
            } else if (row.status === 1) {
                return "启用";
            }
        },
        formatterType(row) {
            if (row.type === 1) {
                return "实体仓";
            } else if (row.type === 2) {
                return "店铺仓";
            }
        },
        formatterOwnerShip(row) {
            if (row.ownerShip === 1) {
                return "自有";
            } else if (row.ownerShip === 2) {
                return "第三方";
            } else {
                return "无";
            }
        }
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    // padding: 10px 0 0 0;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            // width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}

.mb20 {
    margin-bottom: 20px;
}
</style>
